<template>
    <view class="wrap">
        <swiper class="swiper" autoplay="true" interval="4000" :duration="500" circular="true" v-if="hotList.length > 0">
            <swiper-item v-for="(item, index) in hotList" :key="index" class="swiper-item" @click="previewTemplate(item)">
                <LazyImage class="cover-image" :src="item.h_theme_image_url" mode="widthFix"></LazyImage>
            </swiper-item>
        </swiper>
        <view class="template-list-wrap">
            <view class="template-list" v-if="templateList.length > 0">
                <view class="item" v-for="(item, index) in templateList" :key="index" @click="previewTemplate(item)">
                    <LazyImage class="cover-image" :src="item.v_theme_image_url" mode="aspectFill" :imageStyle="imageStyle"></LazyImage>
                    <view class="template-title">{{ item.temp_name }}</view>
                </view>
            </view>
            <!-- 没有数据 -->
            <view class="no-list" v-if="isNoTemplate"><u-empty text="暂无模板数据" mode="list"></u-empty></view>
        </view>
    </view>
</template>
<script>
import { getTemplateList, getTemplateDetail } from '@/api/template.js';
import LazyImage from '@/components/LazyImage/index.vue';
import { getVuex_templateData } from '@/common/common.js';
export default {
    name: '',
    data() {
        return {
            // 顶部推荐列表
            hotList: [],
            // 模板列表
            templateList: [],
            // 没有模板数据
            isNoTemplate: false,
            imageStyle: {
                width: '100%',
                height: '100%',
                borderRadius: '10rpx'
            }
        };
    },
    props: {
        name: {
            type: String,
            default: ''
        }
    },
    computed: {},
    async created() {
        let data = await getTemplateList();
        if (data && data.hot_list && data.hot_list.length > 0) {
            this.hotList = data.hot_list;
        }
        if (data && data.temp_list && data.temp_list.length > 0) {
            this.templateList = data.temp_list;
        }
        if (this.templateList.length <= 0) {
            this.isNoTemplate = true;
        }
    },
    onShow() {
        this.$u.vuex('vuex_selectedPhotosList', []);
        this.$u.vuex('vuex_templateData', {});
    },
    methods: {
        // 预览模板
        previewTemplate(item) {
            if (item.temp_code == 'template0' || item.temp_code == 'template1') {
                let data = {
                    id: item.id,
                    code: item.temp_code,
                    name: item.temp_name,
                    coverImage: item.v_theme_image_url
                };
                this.$u.vuex('vuex_templateData', data);
                this.getTemplateDetail();
            } else {
                this.$showToast('模板正在努力制作ing，请期待~');
            }
        },
        // 获取模板详情
        async getTemplateDetail() {
            let detail = await getTemplateDetail(this.vuex_templateData.id);
            if (detail && detail.length > 0) {
                let data = getVuex_templateData(detail);
                this.$u.vuex('vuex_templateData', this.$u.deepMerge(this.vuex_templateData, data));
                this.$u.route('/pages/compoundPages/previewTemplate/previewTemplate');
            }
        }
    },
    watch: {},
    components: { LazyImage }
};
</script>
<style lang="scss" scoped>
.wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    .swiper {
        width: 100%;
        height: 386rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
    .template-list-wrap {
        flex-grow: 9;
        .template-list {
            border-radius: 10rpx;
            display: flex;
            flex-wrap: wrap;
            padding: 30rpx;
            justify-content: space-between;
            .item {
                flex-shrink: 0;
                margin-bottom: 40rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                .template-title {
                    font-size: 32rpx;
                    color: #000;
                    padding-top: 25rpx;
                }
                .cover-image {
                    width: 330rpx;
                    height: 460rpx;
                    border-radius: 10rpx;
                }
            }
        }
        .no-list {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>
